<template>
  <div v-if="article.id">
    <ArticleContent :article="article"></ArticleContent>
    <CommentTextArea :aid="id"></CommentTextArea>
    <CommentList :comments="article.comments"></CommentList>
  </div>
</template>
<script>
import ArticleContent from "@/components/article/ArticleContent.vue";
import CommentTextArea from "@/components/comment/CommentTextArea.vue";
import CommentList from "@/components/comment/CommentList.vue";
import { createNamespacedHelpers } from "vuex";
const { mapActions } = createNamespacedHelpers("likes");
export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: "Article",
  components: {
    ArticleContent,
    CommentTextArea,
    CommentList,
  },
  mixins: [],
  props: {},
  provide() {
    return {
      getArticleById: this.getArticleById,
      // isInitLike: this.isInitLike,
    };
  },
  data() {
    return {
      id: "",
      article: {},
      // isInitLike: {
      //   isInitLike: false
      // },
    };
  },
  created() {
    this.id = this.$route.params.id;
    this.getArticleById();
  },
  watch: {},
  mounted() {},
  methods: {
    async getArticleById() {
      try {
        this.article = await this.$api({
          type: "getArticleById",
          data: { id: this.id },
        });
        let likeUsers = this.article?.like_users || [];
        let uid = this.$store.getters.userInfo?._id;
        let aid = this.article?.id;
        if (likeUsers.includes(uid)) {
          this.pushLike({ aid });
          // this.$set(this.isInitLike, 'isInitLike', true);
        }
      } catch (err) {
        this.$notify.success({
          title: "获取失败",
          message: err.message,
        });
      }
    },
    ...mapActions(["pushLike", "sendLikes"]),
  },
};
</script>

<style lang="stylus" >
.blog-main--card {
  width: 80%;
}
</style>